<template>
    <div class="all">
        <!-- 系统信息header -->
        <div class="header">
            <div>
                <span class="space">&nbsp;</span>
                <span>系统信息</span>
            </div>
        </div>
        <!-- 系统信息container -->
        <div class="container">
            <div class="systemInfo">
                <div class="header"><span>系统信息</span></div>
                <div class="content">
                    <el-table :show-header="false" :data="tableData" border :cell-style="columnStyle"
                        style="width: 100%; margin-top: 20px">
                        <el-table-column width="180" prop="name"></el-table-column>
                        <el-table-column prop="amount1"></el-table-column>
                        <el-table-column width="180" prop="amount2"></el-table-column>
                        <el-table-column prop="amount3"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ThirdSystemInfoView',

    data() {
        return {
            form: {
                name: 'admin',
                role: '超级管理员',
                user: 'aa',
                email: 'eeeeeeeeee',
                phoneNum: '11111111111',
                oldPwd: '',
                newPwd: '',
                confirmPwd: ''
            },
            tableTitle: [
                '服务器操作系统', 'PHP版本',
                '安全模式', 'Socket支持',
                'GD版本', 'IP库版本',
                '安装日期', 'Web服务器',
                'MySQL版本', '安全模式GID',
                '时区设置', 'Zlib支持',
                '程序版本', '编码'
            ],
            tableData: [
                { id: 1, name: "服务器操作系统:", amount1: 'Linux (114.55.34.251)', amount2: "Web 服务器:", amount3: 'nginx/1.10.2' },
                { id: 2, name: "PHP 版本:", amount1: '5.6.30', amount2: "MySQL 版本:", amount3: '5.5.56' },
                { id: 3, name: "安全模式:", amount1: '否', amount2: "安全模式 GID:", amount3: '否' },
                { id: 4, name: "Socket支持:", amount1: '是', amount2: "时区设置:", amount3: 'Asia/Beijing' },
                { id: 5, name: "GD 版本:", amount1: 'GD2（JPEG GIF PNG）', amount2: "Zlib 支持:", amount3: '是' },
                { id: 6, name: "IP 库版本:", amount1: '20071024', amount2: "程序版本:", amount3: 'v2.2.2 RELEASE 20180629' },
                { id: 7, name: "安装日期:", amount1: '2018-05-02', amount2: "编码:", amount3: 'UTF-8' },
            ]
        };
    },



    mounted() {

    },

    methods: {
        columnStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 2) {
                //第三第四列的背景色就改变了2和3都是列数的下标
                return "background:rgba(28,176,154, 0.05);text-align:center;";
                // return 'font-weight:700';
            } else {
                return "background:#ffffff;";
            }
        },

    },
};
</script>

<style  scoped>
* {
    padding: 0;
    margin: 0;
}

.all {
    float: right;
    background-color: #f0f0f0;
    height: 94vh;
    width: 100%;
}

.all>.header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    font-size: 18px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
}

.header .space {
    margin-right: 6px;
    background-color: rgb(28, 176, 154);
}

.header button {
    padding: 5px 10px;
}

.container>div {
    margin: 30px 40px;
}

.systemInfo {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
}

.systemInfo .header {
    padding: 12px 20px 0;
}

.content {
    padding: 40px 40px;
}
</style>